<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/common/common.jsp" %>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> 
  <head>
    <base href="<%=basePath%>" />
    <title>Building Heat Consumption Analysis Chart</title>
    <script type="text/javascript">
		var path = "<%=basePath%>";
	</script>
	<meta http-equiv="pragma" content="no-cache" />
	<meta http-equiv="cache-control" content="no-cache" />
	<meta http-equiv="expires" content="0" />    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3" />
	<meta http-equiv="description" content="This is my page" />
	<link rel="stylesheet" type="text/css" href="<%=basePath%>beshs/css/content.css" />
	<script type="text/javascript" src="<%=basePath%>resources/jquery/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="<%=basePath%>resources/datepicker/datepicker.js"></script>
	<!-- 页面特效 -->
	<jsp:include page="/beshs/res-refer/page-effect-reference.jsp" />
	<!-- 系统通用资源 -->
	<jsp:include page="/resources/resource-refer/common-resource-reference.jsp" />
	<!-- 报表 -->
    <jsp:include page="/resources/resource-refer/component-fusioncharts-reference.jsp" />
    <!-- 用户访问菜单路径 -->
	<jsp:include page="/resources/usertrace/common-uservisit-reference.jsp" />
  </head>
  
  <body>
    <div class="content_all">
        <!--查询条件开始-->
	  	<div class="search" >
	    	<form action="">
		    	 <table cellpadding="0" cellspacing="0">
		      		<tr>
				        <th>Project：</th>
          			<td><s:select name="projectID" id="projectID" list="projectList" listKey="id" listValue="projectName" headerKey="" headerValue="Please select" cssClass="s_sel"></s:select>
            			&nbsp;</td>
            		<th>District：</th>
          			<td>
          				<script type="text/javascript">
	          				function reloadCommunitys(projectUID, communityUID) {
	      						$("select[name='communityID']").children("option").slice(1).remove();
	      						if(projectUID!=null && projectUID!="") {
	      							$.getJSON(path+"beshs/communityActionJson!queryCommunitysByBelongs.do?date="+new Date(), {
	      								projectUID: projectUID
	      							}, function(data){
	      								for(var index=0; index<data.length; index++) {
	      									if(communityUID!=null && communityUID!="" && communityUID==data[index].id) {
		        								$("select[name='communityID']").append("<option value='"+data[index].id+"' selected='selected'>"+data[index].communityName+"</option>");
		        							} else {
		        								$("select[name='communityID']").append("<option value='"+data[index].id+"'>"+data[index].communityName+"</option>");
		        							}
	      								}
	      							});
	      						}
	      					}
          				
	          				$(function() {
	      						$("select[name='projectID']").change(function(){
			        				var projectUID = $(this).val();
			        				var communityUID = $("select[name='communityID']").val();
			        				reloadCommunitys(projectUID, communityUID);
			        			});
	      					});
          				</script>
          				<s:select name="communityID" id="communityID" list="communityList" listKey="id" listValue="communityName" headerKey="" headerValue="Please select" cssClass="s_sel"></s:select>
            			&nbsp;</td>
            			<th>Building：</th>
          			<td>
          				<script type="text/javascript">
	          				function reloadBuildings(projectUID, communityUID, buildingUID) {
	          					$("select[name='buildingID']").children("option").slice(1).remove();
          						if((projectUID!=null && projectUID!="") 
          								|| (communityUID!=null && communityUID!="")) {
          							$.getJSON(path+"beshs/buildingActionJson!queryBuildingsByBelongs.do?date="+new Date(), {
          								projectUID: projectUID,
          								communityUID: communityUID
		        					}, function(data) {
		        						for(var index=0; index<data.length; index++) {
		        							if(buildingUID!=null && buildingUID!="" && buildingUID==data[index].id) {
		        								$("select[name='buildingID']").append("<option value='"+data[index].id+"' selected='selected'>"+data[index].buildingName+"</option>");
		        							} else {
		        								$("select[name='buildingID']").append("<option value='"+data[index].id+"'>"+data[index].buildingName+"</option>");
		        							}
		        						}
		        					});
          						}
	          				}
          				
	          				$(function(){
	      						$("select[name='projectID']").change(function(){
	      							var projectUID = $(this).val();
	      							var communityUID = $("select[name='communityID']").val();
	      							var buildingUID = $("select[name='buildingID']").val();
	      							reloadBuildings(projectUID, communityUID, buildingUID);
	      						});
	      						
								$("select[name='heatRoom.communityID']").change(function(){
									var communityUID = $(this).val();
	      							var projectUID = $("select[name='projectID']").val();
	      							var buildingUID = $("select[name='buildingID']").val();
	      							reloadBuildings(projectUID, communityUID, buildingUID);
	      						});
	      					});
          				</script>
          				<s:select name="buildingID" id="buildingID" list="buildingList" listKey="id" listValue="buildingName" headerKey="" headerValue="Please select" cssClass="s_sel"></s:select>
            			&nbsp;</td>
				        <td>
				            <input name="query" type="button" value="Query" class="s_btn" />
				        	<input name="reset" type="reset" value="Reset" class="s_btn" />
		        	    </td>
		      		</tr>
		    	 </table>
	    	</form>
	  	</div>
	  	<!--查询条件结束-->
     <div id="chartdiv" style="position: absolute;z-index:-1000;"></div>
    
    </div>
  </body>
  <script type="text/javascript">
	  $(function(){
			$("input[name='query']").click(function(){
				var projectID = $("#projectID").val();
				var communityID = $("#communityID").val();
				var buildingID = $("#buildingID").val();
				var buildingName  = $("#buildingID option:selected").html();  
				$.ajax({
					   type: "POST",
					   url: "beshs/consumeStatisticsAction!getUserConsumeDate.do",
					   data: "projectID="+projectID+"&communityID="+communityID+"&buildingID="+buildingID+"&buildingName="+buildingName,
					   success: function(msg){
						   $(document).ready(function(){
								var chart = new FusionCharts("<%=request.getContextPath()%>/fusioncharts/FCF_MSColumn3D.swf", "chart", "1000", "400","0","0");
								chart.addParam("wmode","Opaque");//极其重要的一点，去掉了或者是位置放在下面会造成flash遮挡住日历控件的显示
								chart.setDataXML(msg);
							    chart.render("chartdiv"); 
						  });
					   }
					});
			});
			
	  });
  </script>
</html>
